Instead of adding the BASE_HREF to each route handler, we could put the handlers on an express Router and mount that under the BASE_HREF. Something like router = express.Router(), then change all app.{get,use}() to router.{get,use}(), and finally app.use(process.env.BASE_HREF||'/', router).

Alternatively, we could mount a pre-processing middleware that strips the BASE_HREF prefix before forwarding the request to the other handlers. Something like this (untested):

if (process.env.BASE_HREF && process.env.BASE_HREF != '/') {
  const baseHref = process.env.BASE_HREF.replace(/\/+$/, '')
  app.use((req, res, next) => {
    if (req.url == '/' || req.url == baseHref) {
      res.redirect(302, baseHref+'/')
    } else if (req.url.startsWith(baseHref+'/')) {
      req.url = req.url.slice(baseHref.length)
      next()
    } else {
      res.sendStatus(404)
    }
  })
}

Personally I've just been making sure to run the dev-server with BASE_HREF=/, with e.g. (source config1.env && source config2.env && BASE_HREF=/ npm run dev-server). But I guess it could make sense to support BASE_HREF, to make the dev-server behave more closely to the live server.

Mounted router onto base path and removed prefix from individual routes

lgtm

Otherwise, it's good - good work

@FedOken

• The clear icon comes from the default HTML input behavior rather than something custom. There isn’t currently spacing between the text and icon, so I can look into whether we can safely adjust that without overriding native styles too heavily.
• I can also check if it’s possible to add a hover cursor to the clear icon, though I’m aiming to avoid large overrides since this PR is focused on gradually introducing the new designs rather than doing broader cleanup.
• I’ll pass along the placeholder text feedback to design so we can keep that consistent with the intended spec.
• The dev server behaves a bit differently from production, so it doesn’t currently support switching themes or API URLs per instance.
• For the navbar spacing and circle issues, I’ve tried to keep changes minimal in this PR to make review easier. I did prevent the navbar text from wrapping, which can truncate "Explorer API" on smaller screens. I can look at adjusting the breakpoint address that more cleanly.

Updated PR to add proper stylings for light theme and raised the target width for nav link line wraps. I also fixed the issue of the mobile menu not closing on certain screen sizes since it only required a small change.

EDIT: Also addressed @sprihozhiy brought up regarding the page refresh when the network selector was touched on mobile

@FedOken

• The clear icon comes from the default HTML input behavior rather than something custom. There isn’t currently spacing between the text and icon, so I can look into whether we can safely adjust that without overriding native styles too heavily.

input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
    margin-left: 12px;
}

• I can also check if it’s possible to add a hover cursor to the clear icon, though I’m aiming to avoid large overrides since this PR is focused on gradually introducing the new designs rather than doing broader cleanup.

The solution for the pointer icon above. I understand that this is a redesign overall, but we can fix the bugs related to this part.

• I’ll pass along the placeholder text feedback to design so we can keep that consistent with the intended spec.

Ok

• The dev server behaves a bit differently from production, so it doesn’t currently support switching themes or API URLs per instance.

Ok

• For the navbar spacing and circle issues, I’ve tried to keep changes minimal in this PR to make review easier.

It’s up to you, but this seems a bit odd. Maybe it’s just me.

• I did prevent the navbar text from wrapping, which can truncate "Explorer API" on smaller screens. I can look at adjusting the breakpoint address that more cleanly.

It looks better; you could also add a gap to avoid that
Before

After

*Updated PR to add proper stylings for light theme and raised the target width for nav link line wraps. I also fixed the issue of the mobile menu not closing on certain screen sizes since it only required a small change.

Looks good, thanks

*EDIT: Also addressed @sprihozhiy brought up regarding the page refresh when the network selector was touched on mobile

It's working now; I don't know if you changed anything

@FedOken

The solution for the pointer icon above. I understand that this is a redesign overall, but we can fix the bugs related to this part.

In general, keeping PRs focused on their main purpose helps make them easier to review and avoids mixing in unrelated changes. Even small changes can be easy to overlook if they’re assumed to be directly tied to the main goal of the PR, which can introduce risk. I’ll go ahead and add the cursor to the hover icon here since it’s small and closely related.

It looks better; you could also add a gap to avoid that

The nav bar items are currently spaced using flexbox’s space-between, which works well for larger screens. I’ll incorporate your suggestion for smaller screen sizes where it can help improve the layout.

Pushed updated commit with cropped svg icons, stylings on the search input's clear icon, and an un-commented gap on .network-hover-menu-option. The gap doesn't seem to mess with the existing stylings so I added it to the root .network-hover-menu-option.